<template>
  <div class="set-font-size">
    <i class="iconfont iconA small-a"></i>
    <div v-for="(item, index) in fontSizeArr" :key="index" class="line-dot">
      <div class="hor-line"></div>
      <div
        :class="{
          'ver-line': true,
          'select-ver-line': fontSize === item
        }"
        @click="selectFontSize(item)"
      ></div>
      <div class="hor-line"></div>
    </div>
    <i class="iconfont iconA large-a"></i>
  </div>
</template>

<script>
  import EventEmitter from '@/utils';

  export default {
    data() {
      return {
        fontSizeArr: [12, 16, 20, 24, 28, 32, 36],
        fontSize: 24,
      }
    },
    methods: {
      selectFontSize(size) {
        this.fontSize = size;
        EventEmitter.emit('setFontSize', size);
      }
    },
  }
</script>

<style lang="scss" scoped>
@import '@/assets/style/global.scss';
.set-font-size {
  @include flexLayout;
  height: 100%;
  padding: 0 px2rem(30);
  .small-a {
    font-size: px2rem(20);
  }
  .large-a {
    font-size: px2rem(40);
  }
  .line-dot {
    flex: 1;
    @include flexLayout;
    // &:last-child代表当前元素的最后一个DOM元素
    // :last-child代表当前元素的最后一个子DOM元素
    &:nth-child(2) {
      :first-child {
        visibility: hidden;
      }
    }
    &:nth-child(8) {
      :last-child {
        visibility: hidden;
      }
    }
    .ver-line {
      width: px2rem(20);
      height: px2rem(20);
      border: 1px solid #bbb;
      border-radius: 100%;
    }
    .select-ver-line {
      background-color: #333;
    }
    .hor-line {
      flex: 1;
      border-top: 1px solid #bbb;
    }
  }
}
</style>